<template>
	<view class="one ">

		<u-notice-bar mode="vertical" :list="list"></u-notice-bar>
		<view class="80">

		</view>
		<view style="height: 180rpx;">

		</view>
		<view style="margin-left: 30rpx; margin-right: 30rpx;"
			class="u-font-40 bg_FFFFFF u-b-r-20 cl_000 u-m-t-10 u-p-20">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<view>
					扫码赠送抵扣金 ：<text style="color: #F94444;">{{currentInv.amount}}</text>
				</view>
				<!-- #ifdef APP -->
				<u-button v-show="invIndex!==0" size="mini" type="error" @click="handleDeleCode">删除邀请码</u-button>
				<!-- #endif -->
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<view>
					可用次数：<text style="color: #F94444;">{{currentInv.num}}</text>
				</view>
				<!-- #ifdef APP -->
				<u-button v-show="invIndex!==0" size="mini" type="error" @click="handleEditCishu">增加次数</u-button>
				<!-- #endif -->
			</view>
		</view>
		<view class="u-w-700 u-flex-col u-col-center u-auto">
			<view style="height: 30rpx;">

			</view>

			<view class="" style="color: #333;padding-bottom: 20px;">邀请二维码</view>
			<view class="u-w-300 u-h-300 u-auto" style="border: 5rpx solid #E9062E;overflow: hidden;">
				<!-- 	<u-image :src='currentInv.qrcode_url' width='240rpx' height='240rpx'></u-image> -->
				<u-swiper @change="handleSwiperChange" :circular="false" mode="none" img-mode="aspectFit"
					:list="invList" :autoplay="false" height="300rpx"></u-swiper>


			</view>
			<view @click="$u.route('/subcontract/addercode/addercode')" class="u-m-t-20"
				style="background: linear-gradient(0deg, #FFD358, #FCD890);color: #FE2E0D;">新增二维码</view>
			<!-- #ifndef MP -->
			<view @click="copy" class="u-flex  u-auto u-m-t-20 u-p-10 u-b-r-30 cl_FFF u-font-20"
				style="background-color: #F46C1A;">
				<view class="">邀请链接:</view>
				<view class="text-cut u-w-370">{{currentInv.link_url}}</view>
				<view class="u-m-r-10 u-m-l-30">复制</view>
				<view class="u-h-30">
					<u-image src='https://www.sqkjkj.vip/wxImg/invitation/img1.png' width='22rpx'
						height='22rpx'></u-image>
				</view>
			</view>
			<!-- #endif -->

			<view @click="open"
				class="u-m-t-20 u-l-s-4 u-weight u-b-r-20 u-w-400 u-h-100 u-auto u-l-h-100 u-text-center u-font-34"
				style="background: linear-gradient(0deg, #FFD358, #FCD890);color: #FE2E0D;">
				生成邀请海报
			</view>
			<view class="u-p-20 " style="color: #FFF7C8;">
				<view class=" u-flex u-row-center">
					<u-image src='https://www.sqkjkj.vip/wxImg/invitation/img2.png' width='35rpx'
						height='35rpx'></u-image>
					<view class="u-font-40 u-weight" style="padding: 0 10rpx;">邀请规则</view>
					<u-image src='https://www.sqkjkj.vip/wxImg/invitation/img2.png' width='35rpx'
						height='35rpx'></u-image>
				</view>
				<view class="u-font-20 bg_FFFFFF u-b-r-20 cl_000 u-m-t-10 u-p-20">
					<u-parse :html="inv.invite_rule"></u-parse>
				</view>
			</view>
			<view @click="$u.route('/subcontract/invitation/givemoney/givemoney')"
				class="u-w-620 u-h-100 u-l-s-6 u-auto u-l-h-100 u-text-center u-font-40 u-weight u-b-r-30"
				style="background:linear-gradient(0deg, #F94444 0%, #FF001D 100%);color: #FDD996;">邀请好友收益</view>
		</view>

		<u-mask :show="isShow" @click="isShow=false">
			<view class="warp">
				<view class="u-w-650 u-auto u-flex-col u-col-center">
					<view class="">
						<image class="u-w-650" :style="{'height':heights}" :src="path" mode="widthFix"></image>
						<!-- <l-painter ref="posterLoad" :board="poster" isCanvasToTempFilePath @success="hadnleImgSuccess"
							custom-style="position: fixed; left: 200%" useCORS>
						</l-painter> -->
						<l-painter custom-style="position: fixed; left: 200%" ref="posterLoad"></l-painter>
					</view>
					<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
					<view class="u-fixed u-b-20 u-p-20">
						<view class="u-w-650 u-auto bg_zs u-p-20 u-b-r-20 u-text-center cl_FFF" @click.stop="saveImage">
							保存图片
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="u-fixed u-b-20 u-p-20">
						<view class="u-w-650 u-auto bg_zs u-p-20 u-b-r-20 u-text-center cl_FFF" @click.stop="saveImage">
							保存图片
						</view>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</u-mask>
		<view class="u-h-20">

		</view>
	</view>
</template>

<script>
	import {
		URL
	} from '@/config/config.js'

	export default {
		data() {
			return {
				inv: '',
				invList: [],
				invIndex: 0,
				show: false,
				// 遮罩层
				num: 0,
				list: [],
				poster: '',
				// 生成海报
				isShow: false,
				path: '',
				poster: {},
				heights: ''
			}
		},
		onLoad() {
			this.heights = uni.getWindowInfo().screenHeight + "rpx";
			uni.showModal({
				title: '提示',
				content: '邀请码可左右滑动',
				showCancel: false
			})
		},
		onShow() {
			this.init()

		},
		onShareAppMessage() {
			return {
				title: '邀请好友送抵扣金',
				imageUrl: 'https://www.sqkjkj.vip/wxImg/logo.png',
				path: `/pages/home/home?regcode=${uni.getStorageSync('userinfo').regcode}`
			}
		},
		onShareTimeline() {
			return {
				title: '邀请好友送抵扣金',
				imageUrl: 'https://www.sqkjkj.vip/wxImg/logo.png',
				path: `/pages/home/home?regcode=${uni.getStorageSync('userinfo').regcode}`
			}
		},
		computed: {
			currentInv() {
				if (!this.invList.length) {
					return {}
				}
				return this.invList[this.invIndex]
			}
		},
		methods: {
			init() {
				let taht=this;
				this.$api.member_invite_qrcode({
					// #ifdef MP-WEIXIN 
					platform: 'mini',
					qrcode_url: `/pages/home/home`
					// #endif
					// #ifdef MP-ALIPAY
					platform: 'mini-alipay',
					qrcode_url: `/pages/home/home`
					// #endif
					
					// #ifdef APP
					platform: 'app',
					qrcode_url: `${URL.split('index.php')[0]}member/#/pages/login/register`
					// #endif
				}, res => {
					if (res.data.code == 1) {
						res.data.data.image = res.data.data.qrcode_url
						taht.inv = res.data.data
						taht.invIndex = 0
						taht.invList = [res.data.data]
						taht.list = res.data.data.deduct_list
						taht.member_invite_qrcode()
					}
				})
			},
			hadnleImgSuccess(res) {
				console.log(res)
			},
			handleSwiperChange(index) {
				this.invIndex = index
			},
			handleDeleCode() {
				uni.showModal({
					title: '确认删除此邀请码？',
					success: (e) => {
						if (!e.confirm) return
						console.log(e)
						this.$api.deleteCode({
							id: this.currentInv.id
						}, res => {
							if (res.data.code == 1) {
								uni.showToast({
									title: '删除成功'
								})
								this.init()
							}
						})
					}
				})
			},
			handleEditCishu() {
				this.$u.route(
					`/subcontract/editercode/editercode?code_id=${this.currentInv.id}&amount=${this.currentInv.amount}`
				)
				// this.$u.route()
			},
			member_invite_qrcode() {
				this.$api.myQrCodeList({
					// #ifdef MP-WEIXIN || MP-ALIPAY
					platform: 'mini',
					qrcode_url: `/pages/home/home`
					// #endif
					// #ifdef APP
					platform: 'app',
					qrcode_url: `${URL.split('index.php')[0]}member/#/pages/login/register`
					// #endif
				}, res => {
					const list = res.data.data.map((item) => {
						return {
							...item,
							// #ifdef MP-WEIXIN || MP-ALIPAY
							qrcode_url: item.mini_code_url,
							image: item.mini_code_url,
							// #endif
							// #ifdef  MP-ALIPAY
							qrcode_url: item.mini_alipay_code_url,
							image: item.mini_alipay_code_url,
							// #endif
							// #ifdef APP
							qrcode_url: item.app_code_url,
							image: item.app_code_url,
							// #endif
						}
					})
					this.invList = [...this.invList, ...list]
					console.log(this.invList)
				})

			},
			// 点击复制
			copy() {
				uni.setStorageSync('noOnHide', 'noOnHide')
				uni.setClipboardData({
					data: this.inv.link_url,
					success: function() {
						console.log('success');
					}
				});
			},
			// 点击打开遮罩层
			open() {
				this.posterClick()
				this.isShow = true
			},
			posterClick() {
				this.path = ''
				this.poster = {
					css: {
						width: "650rpx",
					},
					views: [{
						type: "view",
						css: {
							width: "650rpx",
							height: '1040rpx',
							backgroundImage: `url(${uni.getStorageSync('conf').bg_logo})`,
							display: 'flex',
							alignItems: 'center',
							justifyContent: 'center'
						},
						views: [{
								src: this.currentInv.qrcode_url,
								type: "image",
								css: {
									objectFit: "cover",
									objectPosition: "100% 100%",
									borderRadius: '20rpx',
									width: "300rpx"
								},
							},
							{
								type: 'text',
								text: `注册可获得抵扣金${this.currentInv.amount}`,
								css: {

									fontSize: "40rpx",
									color: "#ffffff",
									textAlign: 'center',
									position: 'absolute',
									width: '100%',
									bottom: '280rpx',
								}
							},
						]
					}, ]
				}
				this.$refs.posterLoad.render(this.poster)
				this.$refs.posterLoad.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						this.path = res.tempFilePath
						// console.log(res.tempFilePath);
					},
				});
			},
			// 保存到相册
			saveImage() {
				var that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.path,
					success(res) {
						uni.showToast({
							title: '保存成功'
						})
						console.log(res)
					}
				})
			},

		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #fe7758;
	}

	.one {
		width: 100%;
		height: 100%;
		background: url('https://www.sqkjkj.vip/wxImg/invitation/img.png') no-repeat;
		background-size: 100% 100%;
	}

	.das {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
	}
</style>